<template>
    <view>
        <!-- 顶部菜单 -->
        
        <!-- 没有scrool-row以及scroll-row-item的样式，数字将会垂直排列，添加之后变成了横向紧密排列 -->
        <!-- height设置80ups，是通过ps工具估算出来的顶部选项卡的高度 -->
        <scroll-view scroll-x class="border-bottom scroll-row" style="height: 80upx;"
        :scroll-into-view="scrollinto">
            <!-- px-3：配置的顶部选项卡的每个选项的间距 -->
            <!-- 在view里面也是可以配置for循环的，循环的是view内部的text组件 -->
            <view class="scroll-row-item px-3" style="height: 80upx; line-height: 80upx;" 
            v-for="(item, index) in tabBars" :key="index" 
            :class="tabIndex === index ? 'main-text-color':''"
            :id="'tab'+index" @click="changeTab(index)" >
                <text class="font-md">{{item.name}}</text>
            </view>
        </scroll-view>
        <!-- 顶部菜单项详情 -->
        
        <!-- 必须要指定高度，只有指定高度才能够滚动，另外swiper高度要和swiper-item高度一致 -->
        <!-- 可以尝试一下，横向拖动，是可以进行切换的 -->
        <!-- 动态绑定height之后，需要设置单位从upx到px，判断是否填充满就看屏幕是不是满屏都是数字 -->
        <swiper duration="150" :current="tabIndex" :style="'height: ' + scrollH + 'px;'"
        @change="onChangeTab">
            <!-- newitems是以顶部菜单项为单位组织的绑定数据；index是顶部菜单项索引 -->
            <swiper-item v-for="(item, index) in newitems" :key="index">
                <!-- scrolltolower，下拉到底部触发事件 -->
                <scroll-view scroll-y="true" :style="'height: ' + scrollH + 'px;'" @scrolltolower="loadmore(index)">
                    <block v-for="(list, listIndex) in item.list" :key="listIndex">
                        <!-- 轮播图片 -->
                        <swiper-image v-if="list.type === 'swipers'" :resdata="list.data" />
                        <!-- 首页分类 -->
                        <!-- 这里采用的v-else-if，作为分支，如果list.type不是swipers，才会走到这里 -->
                        <template v-else-if="list.type === 'indexnavs'">
                            <index-navs :resdata="list.data" />
                            <divider />
                        </template>
                        
                        <!-- 三图广告 -->
                        <!-- 这里采用的v-else-if，作为分支，如果list.type不是swipers，且不是indexnavs，才会走到这里 -->
                        <template v-else-if="list.type === 'threeAdvdata'">
                            <three-adv :resdata="list.data" />
                            <divider />
                        </template>
                        <!-- <cart headTitle="每日精选" bodyCover="/static/images/demo/demo4.jpg"></cart> -->
                        <!-- <cart :showHeader="true">
                            <block slot="title">标题</block>
                            <image src="/static/images/bg.jpg" mode="widthFix"/>
                        </cart> -->
                        
                        <!-- 产品列表 -->
                        <view class="row j-sb" v-else-if="list.type === 'commonListData'">
                            <block v-for="(item, index) in list.data" :key="index">
                                <common-list :item="item" :index="index"/>
                            </block>
                        </view>
                    </block>
                    <view class="d-flex a-center j-center text-light-muted font-md py-3">
                        上拉加载更多
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
    import swiperImage from "@/components/index/swiper-image.vue"
    import indexNavs from "@/components/index/index-navs.vue"
    import divider from "@/components/common/divide-line.vue"
    import threeAdv from "@/components/index/three-adv.vue"
    import cart from "@/components/common/cart.vue"
    import commonList from "@/components/common/common-list.vue"
    
    let demoTabBars= [
        {name: "推荐",},
        {name: "关注",},
        {name: "体育",},
        {name: "热点",},
        {name: "财经",},
        {name: "娱乐",},
        {name: "军事",},
        {name: "历史",},
        {name: "本地",}
    ]
    
    let demo1 = [
        {
            "type": "swipers",
            "data": [
                {"src":"../../static/images/demo/demo4.jpg"},
                {"src":"../../static/images/demo/demo4.jpg"},
                {"src":"../../static/images/demo/demo4.jpg"}
            ]
        },
        {
            "type": "indexnavs",
            "data":[
                {src: "/static/images/indexnav/1.png", text: "新品发布"},
                {src: "/static/images/indexnav/2.gif", text: "小米众筹"},
                {src: "/static/images/indexnav/3.gif", text: "以旧换新"},
                {src: "/static/images/indexnav/4.gif", text: "一份换团"},
                {src: "/static/images/indexnav/5.gif", text: "超值特卖"},
                {src: "/static/images/indexnav/6.gif", text: "小米秒杀"},
                {src: "/static/images/indexnav/7.gif", text: "真心想要"},
                {src: "/static/images/indexnav/8.gif", text: "电视热卖"},
                {src: "/static/images/indexnav/9.gif", text: "家电热卖"},
                {src: "/static/images/indexnav/10.gif", text: "米粉卡"}
            ]
        },
        {
            "type": "threeAdvdata",
            "data":{
                big: {src: "/static/images/demo/demo1.jpg"},
                smalltop: {src: "/static/images/demo/demo2.jpg"},
                smallbottom: {src: "/static/images/demo/demo2.jpg"}
            }
        },
        {
            "type": "commonListData",
            "data":[
                {
                    src: "/static/images/demo/list/1.jpg",
                    title: "米家空调",
                    desc: "1.5匹变频空调",
                    oprice: 1699,
                    pprice: 2699
                },
                {
                    src: "/static/images/demo/list/1.jpg",
                    title: "米家空调",
                    desc: "1.5匹变频空调",
                    oprice: 1699,
                    pprice: 2699
                },
                {
                    src: "/static/images/demo/list/1.jpg",
                    title: "米家空调",
                    desc: "1.5匹变频空调",
                    oprice: 1699,
                    pprice: 2699
                },
                {
                    src: "/static/images/demo/list/1.jpg",
                    title: "米家空调",
                    desc: "1.5匹变频空调",
                    oprice: 1699,
                    pprice: 2699
                }
            ]
        }
    ]
    
    let demo2 = [
        {
            "type": "swipers",
            "data": [
                {"src":"../../static/images/demo/demo4.jpg"},
                {"src":"../../static/images/demo/demo4.jpg"},
                {"src":"../../static/images/demo/demo4.jpg"}
            ]
        },
        {
            "type": "indexnavs",
            "data":[
                {src: "/static/images/indexnav/1.png", text: "新品发布"},
                {src: "/static/images/indexnav/2.gif", text: "小米众筹"},
                {src: "/static/images/indexnav/3.gif", text: "以旧换新"},
                {src: "/static/images/indexnav/4.gif", text: "一份换团"},
                {src: "/static/images/indexnav/5.gif", text: "超值特卖"},
                {src: "/static/images/indexnav/6.gif", text: "小米秒杀"},
                {src: "/static/images/indexnav/7.gif", text: "真心想要"},
                {src: "/static/images/indexnav/8.gif", text: "电视热卖"},
                {src: "/static/images/indexnav/9.gif", text: "家电热卖"},
                {src: "/static/images/indexnav/10.gif", text: "米粉卡"}
            ]
        },
        {
            "type": "commonListData",
            "data":[
                {
                    src: "/static/images/demo/list/1.jpg",
                    title: "米家空调",
                    desc: "1.5匹变频空调",
                    oprice: 1699,
                    pprice: 2699
                },
                {
                    src: "/static/images/demo/list/1.jpg",
                    title: "米家空调",
                    desc: "1.5匹变频空调",
                    oprice: 1699,
                    pprice: 2699
                },
                {
                    src: "/static/images/demo/list/1.jpg",
                    title: "米家空调",
                    desc: "1.5匹变频空调",
                    oprice: 1699,
                    pprice: 2699
                },
                {
                    src: "/static/images/demo/list/1.jpg",
                    title: "米家空调",
                    desc: "1.5匹变频空调",
                    oprice: 1699,
                    pprice: 2699
                }
            ]
        }
    ]
    
    export default {
        components: {
            swiperImage,
            indexNavs,
            divider,
            threeAdv,
            cart,
            commonList
        },
        data() {
            return {
                scrollinto: "",
                scrollH: 500,
                tabIndex: 0,
                
                tabBars:[],
                newitems:[]
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: (res) => {
                    // 输出属性信息，重点关注：
                    // screenHeight：手机屏幕大小
                    // windowHeight：可视区域大小，可视区域都是小于手机屏幕的
                    // console.log(res);
                    
                    // 其中，80代表顶部选项卡的大小，下面的计算公式获得的是滚动屏的高度
                    // 单位是upx，所以需要调用函数讲upx换算为px
                    this.scrollH = res.windowHeight - uni.upx2px(80)                    
                }
            })
            this.__init()
        },
        methods: {
            // 初始化
            __init()
            {
                this.tabBars = demoTabBars
                // 定义一个数组，来承载每一个顶部菜单项的页面绑定数据
                let arr = []
                
                for(var i=0; i<this.tabBars.length; i++){
                    let obj = {
                        list: [],
                        // 该字段有三种选项：1. 上拉加载更多 2. 加载中... 4. 没有更多
                        loadtext: "上拉加载更多"
                    }
                    // 对于首屏/首个菜单项，直接赋值从后台服务获得数据（demo1）
                    if(i === 0){
                        obj.list = demo1
                    }
                    
                    arr.push(obj)
                }
                
                // 将临时的绑定数据容器赋值给newitems
                this.newitems = arr
            },
            
            // addData(){
            //     let index = this.tabIndex
            //     this.newitems[index].list = demo2
            // },
            
            changeTab(clickedTabIndex){
                if(this.tabIndex === clickedTabIndex){
                    return;
                }
                
                this.tabIndex = clickedTabIndex
                this.scrollinto = 'tab' + clickedTabIndex
                let index = this.tabIndex
                this.newitems[index].list = demo2
            },
            
            onChangeTab(e){
                this.changeTab(e.detail.current)
            },
            
            loadmore(index){
                let item =this.newitems[index]
                if(item.loadtext !== '上拉加载更多') return;
                // 模拟加载，延迟2秒配置返回数据
                setTimeout(()=>{
                    item.list = [...item.list, ...demo2];
                    item.loadtext = '上拉加载更多'
                }, 2000);
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>
